<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <div class="filter_area">

        <el-input size="medium" v-model="params.keyword" class="serach_input mr_15 mt_15" placeholder="转赠人信息"></el-input>
        <el-input size="medium" v-model="params.gifted_keyword" class="serach_input mr_15 mt_15" placeholder="受赠人信息"></el-input>

        <label class="mr_15 mt_15">类型</label>
        <el-select v-model="params.type" size="medium" placeholder="请选择" class="mr_15 mt_15">
          <el-option v-for="item in typelist" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-button size="medium" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table :data="list" element-loading-text fit highlight-current-row class="main-loading">
        <el-table-column prop="" label="转赠用户">
         <template slot-scope="scope">
           <div class="user u-flex">
             <div class="face">
               <vimage
                 :src="scope.row.user.picurl"
                 style="
                   width: 50px;
                   height: 50px;
                   display: block;
                   border-radius: 50%;
                 "
               ></vimage>
             </div>
             <div class="info">
               <div class="name" :title="scope.row.user.nickname">{{ scope.row.user.nickname }}</div>
               <!-- <div class="source"><i class="weixin el-sc-weixin4"></i></div> -->
             </div>
           </div>
         </template>
        </el-table-column>
       <el-table-column prop="" label="受赠用户">
        <template slot-scope="scope">
          <div class="user u-flex">
            <div class="face">
              <vimage
                :src="scope.row.gifted_user.picurl"
                style="
                  width: 50px;
                  height: 50px;
                  display: block;
                  border-radius: 50%;
                "
              ></vimage>
            </div>
            <div class="info">
              <div class="name" :title="scope.row.gifted_user.nickname">{{ scope.row.gifted_user.nickname }}</div>
              <!-- <div class="source"><i class="weixin el-sc-weixin4"></i></div> -->
            </div>
          </div>
        </template>
       </el-table-column>
        <el-table-column prop="type" label="转赠类型">
          <template slot-scope="scope">
            <span>{{scope.row.type==0?'余额':'积分'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="转赠额">
          <template slot-scope="scope">
            <span v-if="scope.row.type==0">￥{{ scope.row.money}}</span>
             <span v-if="scope.row.type==1">{{ scope.row.money}}积分</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="手续费">
         <template slot-scope="scope">
           <span v-if="scope.row.type==0">￥{{ scope.row.service_charge}}</span>
            <span v-if="scope.row.type==1">{{ scope.row.service_charge}}积分</span>
         </template>
        </el-table-column>
        <el-table-column prop="status" label="受赠额">
         <template slot-scope="scope">
           <span v-if="scope.row.type==0">￥{{ scope.row.gifted_money}}</span>
            <span v-if="scope.row.type==1">{{ scope.row.gifted_money}}积分</span>
         </template>
        </el-table-column>
         <el-table-column prop="create_time" label="转赠时间">
            </el-table-column>
       <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="EditHandle(scope.row.id)">查看</el-button>
            <el-button v-has v-if="scope.row.status == 1" type="text" @click="complete(scope.row.id)">手动成团</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="table_footer">
        <!--  <el-button size="medium">批量删除
        </el-button>-->
        <el-pagination
          @current-change="ChangeCurrent"
          class="pages"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="size"
          :page-count="page"
          hide-on-single-page
        ></el-pagination>
      </div>
    </div>

  </el-container>
</template>

<script>
import {mapGetters} from 'vuex';
import {getloglist} from '@/api/mall/assettransfer';
import DatePicker from '@/components/DatePicker/index';
import {fitter_keyword} from '@/utils/index';
export default {
  data() {
    return {
      params: {
        type: '',
        keyword:'',
        gifted_keyword:''
      },
      paramsdf: {},
      page: 1,
      size: 10,
      total: 0,
      listLoading: true,
      list: [],
      typelist: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 0,
          label: '余额'
        },
        {
          value: 1,
          label: '积分'
        },

      ]
    };
  },
  components: {
    DatePicker
  },
  mounted() {
    this.getlist();
  },
  methods: {
    search() {
      this.page=1
      this.paramsdf = fitter_keyword(this.params);
      this.getlist();
    },
    //获取列表
    getlist() {
      this.listLoading = true;
      let data = {
        page: this.page,
        size: this.size,
        ...this.params
      };

      getloglist(data).then(res => {
        var jsondata = res.msg;
        this.list = jsondata.data;
        this.total = jsondata.total;
        this.listLoading = false;
      });
    },
    //获取时间
    gettime(value) {
      this.params.begin_date = value[0];
      this.params.end_date = value[1];
    },
    //切换页码
    ChangeCurrent(page) {
      this.page = page;
      this.getlist();
    }
  }
};
</script>

<style lang="scss" scoped>
.login_url {
  padding: 8px 16px;
  background-color: #f4f4f5;
  color: #909399;
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  align-items: center;
  font-size: 14px;
  p {
    margin: 0;
    margin-right: 10px;
  }
  .el-button {
    padding: 0;
  }
}
.pro {
  display: flex;

  .img {
    width: 80px;
    margin-right: 10px;
  }

  .txt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    .name {
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
